<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>vant</title>
        <link rel="stylesheet" href="css/base.css" />
        <link rel="stylesheet" href="css/common.css" />
        <link rel="stylesheet" href="https://unpkg.com/vant@4.4.1/lib/index.css" />
        <style type="text/css">
            body {
                margin: 0 auto;
                max-width: 720px;
                padding: 0 10px;
                text-align: left;
            }

            .title {
                color: red;
                font-weight: bold;
                padding: 10px 0 0;
            }

            h1 {
                text-align: center;
                font-size: 18px;
                padding: 40px 0 0;
            }

            .description {
                padding: 10px 0 40px;
            }

            h2 {
                font-size: 15px;
                font-weight: normal;
            }

            .wrapper {
                padding: 20px 0 0;
                line-height: 24px;
            }

            .tab {
                padding: 15px 0;
                border-bottom: 1px solid #999;
            }

            .tab:last-child {
                border-bottom: 0;
            }

            .param {
                word-break: break-all;
            }

            .action {
                padding: 10px 0 0;
            }

            .action button {
                padding: 5px 20px;
            }

            .select-ipt {
                position: relative;
                padding: 0 0 0 105px;
            }

            .select-ipt .tt {
                position: absolute;
                width: 105px;
                word-wrap: break-word;
                word-break: break-all;
                left: 0;
                top: 0;
            }

            .weui_input {
                width: 100%;
                border: 0;
                outline: 0;
                -webkit-appearance: none;
                background-color: transparent;
                height: 24px;
                line-height: 24px;
            }

            .pageAnimationScale {
                float: left;
                margin-right: 10px;
                width: 80px;
            }

            /*.weui-actionsheet-top-shade{*/
            /*opacity: .7 !important;*/
            /*}*/

            /*.weui-actionsheet-top{*/
            /*position: fixed!important;*/
            /*left: 0;*/
            /*top: 0;*/
            /*-webkit-transform: translateY(-100%);*/
            /*transform: translateY(-100%);*/
            /*-webkit-backface-visibility: hidden;*/
            /*backface-visibility: hidden;*/
            /*z-index: 5000;*/
            /*width: 100%;*/
            /*background-color: #fff;*/
            /*-webkit-transition: -webkit-transform .3s;*/
            /*transition: -webkit-transform .3s;*/
            /*}*/

            /*.weui-actionsheet-top-toggle{*/
            /*-webkit-transform: translateY(0);*/
            /*transform: translateY(0);*/
            /*}*/

            .weui-page-scale .page-scale .slide2 {
                box-sizing: content-box;
                width: 100%;
                height: 100%;
                position: relative;
                transition-property: transform, -webkit-transform;
            }

            .weui-page-scale .page-scale .slide2 li {
                -webkit-flex-shrink: 0;
                -ms-flex: 0 0 auto;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                position: relative;
            }

            .weui-page-scale .page-scale .slide2 li .container {
                height: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                overflow: hidden;
            }

            .weui-page-scale .page-scale .slide2 li .container img {
                max-width: 100%;
                margin-top: -30px;
            }

            .slide {
                position: relative;
                z-index: 1;
            }

            .slide li {
                flex-shrink: 0;
                height: 74.666667vw;
                position: relative;
                transform: translate3d(0, 0, 0);
                z-index: 1;
            }

            .slide li .img {
                height: 100%;
                background-size: cover;
                background-position: center;
            }

            .my-swipe .van-swipe-item {
                color: #fff;
                font-size: 20px;
                line-height: 150px;
                text-align: center;
                background-color: #39a9ed;
            }
        </style>
        <script src="js/jquery.min.js"></script>
        <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
        <script src="https://unpkg.com/vant@4.4.1/lib/vant.min.js"></script>
    </head>
    <body>
        <h1><a href="http://vant-contrib.gitee.io/vant/#/zh-CN">Vant</a></h1>
        <div class="description">Vant 是一个轻量、可定制的移动端组件库</div>
        <div id="app" class="page">
            <div class="flex-box">
                <van-button loading type="primary" />
            </div>
            <div class="flex-box">
                <van-button loading type="primary" loading-type="spinner" />
            </div>
            <div class="flex-box">
                <van-button loading type="success" loading-text="加载中..." />
            </div>
            <div class="flex-box">
                <van-button plain type="primary">朴素按钮</van-button>
            </div>
            <van-button plain hairline type="primary">细边框按钮</van-button>
            <div>
                <van-cell-group>
                    <van-cell title="单元格" value="内容"></van-cell>
                    <van-cell title="单元格" value="内容" label="描述信息"></van-cell>
                </van-cell-group>
            </div>
            <van-icon name="chat-o"></van-icon>
            <van-icon name="chat-o" dot></van-icon>
            <van-icon name="chat-o" badge="9"> </van-icon>
            <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"> </van-image>
            <div>
                <van-row>
                    <van-col span="8">span: 8</van-col>
                    <van-col span="8">span: 8</van-col>
                    <van-col span="8">span: 8</van-col>
                </van-row>
            </div>
            <div>
                <van-cell title="展示弹出层" is-link @click="showPopup" />
                <van-popup v-model:show="show" teleport="body" :style="{ padding: '64px' }">内容</van-popup>
            </div>
            <div>
                <van-radio-group v-model="align" direction="horizontal" style="margin-bottom: 16px">
                    <van-radio name="start">start</van-radio>
                    <van-radio name="center">center</van-radio>
                    <van-radio name="end">end</van-radio>
                    <van-radio name="baseline">baseline</van-radio>
                </van-radio-group>
                <van-space :align="align" style="padding: 16px; background: #f3f2f5">
                    <van-button type="primary">{{ align }}</van-button>
                    <div style="padding: 40px 20px; background: #fff">Block</div>
                </van-space>
            </div>
            <div>
                <van-cell title="文字提示" is-link @click="showToast('提示1')" />
            </div>
            <div>
                <van-cell title="选择单个日期" :value="date" @click="show = true" />
                <van-calendar teleport="body" v-model:show="show" @confirm="onConfirm" />
            </div>
            <div>
                <van-picker title="标题" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange"> </van-picker>
            </div>
            <div>
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item>1</van-swipe-item>
                    <van-swipe-item>2</van-swipe-item>
                    <van-swipe-item>3</van-swipe-item>
                    <van-swipe-item>4</van-swipe-item>
                </van-swipe>
            </div>
        </div>
        <script>
            const app = Vue.createApp({
                data() {
                    const columns = [
                        { text: '杭州', value: 'Hangzhou' },
                        { text: '宁波', value: 'Ningbo' },
                        { text: '温州', value: 'Wenzhou' },
                        { text: '绍兴', value: 'Shaoxing' },
                        { text: '湖州', value: 'Huzhou' }
                    ];
                    return {
                        show: false,
                        align: 'center',
                        columns: columns
                    };
                },
                methods: {
                    showPopup() {
                        this.show = true;
                    },
                    showToast(msg) {
                        // vant.showToast({
                        //     type: 'loading',
                        //     message: msg,
                        //     duration: 0
                        // });

                        // setInterval(() => {
                        //     vant.closeToast();
                        // }, 2000);
                        // vant.showLoadingToast({
                        //     message: '加载中...',
                        //     forbidClick: true
                        // });
                        // vant.showSuccessToast('成功文案');

                        vant.showDialog({
                            message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。'
                        }).then(() => {
                            // on close
                        });
                    }
                },
                mounted() {
                    console.log('mounted');
                }
            });
            app.use(vant).mount('#app');
        </script>
    </body>
</html>
